<template>
    <div class="list-box">
        <div class="pannel-title pannel-between">
            <div>{{ id ? "修改密码查询" : "新增密码查询" }}</div>
        </div>
        <div class="line"></div>
        <div class="data-table">
            <div class="pannel-form">
                <a-form ref="form1" :model="formState" :rules="rules" :labelCol="{ span: 6, offset: 0 }">
                    <a-form-item label="品牌中文" name="nameCN">
                        <a-input v-model:value="formState.nameCN" placeholder="请输入品牌中文" />
                    </a-form-item>
                    <a-form-item label="品牌英文" name="nameEN">
                        <a-input v-model:value="formState.nameEN" placeholder="请输入品牌英文" />
                    </a-form-item>
                    <a-form-item label="型号" name="model">
                        <a-input v-model:value="formState.model" placeholder="请输入设备型号" />
                    </a-form-item>
                    <a-form-item label="用户名" name="username">
                        <a-input v-model:value="formState.username" placeholder="请输入设备初始用户名" />
                    </a-form-item>
                    <a-form-item label="密码" name="password">
                        <a-input v-model:value="formState.password" placeholder="请输入设备初始密码" />
                    </a-form-item>
                    <a-form-item label="默认管理地址" name="url">
                        <a-input v-model:value="formState.url" placeholder="请输入设备默认管理地址" />
                    </a-form-item>
                </a-form>
            </div>
            <div class="pannel-form-btn">
                <a-button type="default" shape="round" @click="cancel()">取消</a-button>
                <a-button :loading="btnLoading" type="primary" shape="round" @click="confirm()">确定</a-button>
            </div>
        </div>
    </div>
</template>
<script>
import { useStore } from "vuex";
import { ref } from "@vue/reactivity";
import { message, Button, Form, Input } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
export default {
    components: {
        AButton: Button,
        AForm: Form,
        AFormItem: Form.Item,
        AInput: Input,
    },
    setup() {
        const store = useStore();
        //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
        store.dispatch("setBreadcrumb", {
            text: "密码查询 / 密码查询管理",
            isBack: false,
        });
        const formState = ref({
            id: "",
            nameCN: "",
            nameEN: "",
            model: "",
            username: "",
            password: "",
            url: "",
        });
        return {
            formState,
            btnLoading: ref(false),
            cateIds: ref([]),
            id: ref(""),
        };
    },
    data() {
        return {
            rules: {
                nameCN: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                nameEN: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                model: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                username: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                password: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                url: [
                    {
                        required: true,
                        message: "不能为空",
                        trigger: "blur",
                    },
                    {
                        trigger: "change",
                        message: "请输入正确的URL地址1",
                        pattern:new RegExp("^(http://|https://)[a-z0-9]+([-.]{1}[a-z0-9]+)*.[a-z]{2,5}(:[0-9]{1,5})?(/.*)?|^((http://|https://)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(:[0-9]{1,5})?(/.*)?$"),
                    },
                ],
            },
        };
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
            httpRequest.post("获取设备密码详情", { id: this.$route.query.id }).then((res) => {
                this.formState = { ...res.data };
                this.formState.nameCN = this.formState.name_cn;
                this.formState.nameEN = this.formState.name_en;
                delete this.formState.name_cn;
                delete this.formState.name_en;
            });
        }
    },
    methods: {
        confirm() {
            this.$refs.form1.validate().then(() => {
                this.btnLoading = true;
                const url = this.formState.id ? "编辑设备密码" : "创建设备密码";
                const msg = this.formState.id ? "修改成功" : "创建成功";
                httpRequest
                    .post(url, this.formState)
                    .then(() => {
                        this.visible = false;
                        this.$router.push("/devicePasswordList");
                        message.success(msg);
                    })
                    .finally(() => {
                        this.btnLoading = false;
                    });
            });
        },
        cancel() {
            this.$router.back();
        },
    },
};
</script>
<style lang="less" scoped>
.line {
    width: 100%;
    margin: 20px 0;
    border-top: 1px solid #eee;
}
</style>
